import React, { Component} from 'react';
import { Comment, Tooltip, Avatar } from 'antd';
import moment from 'moment';
import { Link } from "react-router-dom";
import ReplyItem from './replyItem'
import StickInput from '../../components/stickInput/index'
import AppPage from '../../container/AppPage'// 容器 解决 navbar

import { NavBar,WingBlank } from 'antd-mobile';

import { LeftOutlined} from '@ant-design/icons';

export default class Follow extends Component {
    constructor(props) {
        super(props)
        this.state = {
            likes: 0,
            dislikes: 0,
            action: null
        }
    }
    like = () => {
        this.setState({
            likes: 1,
            dislikes: 0,
            action: 'liked'
        })

    };

    dislike = () => {
        this.setState({
            likes: 0,
            dislikes: 1,
            action: 'disliked'
        })
    };
    render() {
        let action = this.state.action
        let likes = this.state.likes
        let dislikes = this.state.dislikes

        const actions = [
            
        ];
        return (
            <div>
            
                <NavBar
                    // icon={<Link to='/contenthome'><Icon type="left" style={{ color: '#fff' }} /></Link>}
                    onLeftClick={() => console.log('onLeftClick')}
                    leftContent={<Link to='/contenthome'><LeftOutlined style={{ fontSize: 20, color: '#fff' }} /></Link>}

                  
                ><span style={{ fontSize: 16 }}>回复 </span></NavBar>
                <AppPage>

                <WingBlank>
                    <Comment
                        actions={actions}
                        author={<a>Han Solo</a>}
                        avatar={
                            <Avatar
                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                alt="Han Solo"
                            />
                        }
                        content={
                            <div style={{ color:'#141414'}}>
                                We supply a series of design principles, practical patterns and high quality design
                                resources (Sketch and Axure)
                            </div>
                        }
                        datetime={
                            <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                                <span>{moment().fromNow()}</span>
                            </Tooltip>
                        }
                    />
                </WingBlank>
                <div style={{ width: '100vw', height: '2vh', backgroundColor: '#F5F5F9' }}></div>

                <ReplyItem></ReplyItem>
                <ReplyItem></ReplyItem>
                <ReplyItem></ReplyItem>
                <ReplyItem></ReplyItem>
                <ReplyItem></ReplyItem>
                <StickInput></StickInput>
                </AppPage>

            </div>
        );
    }
}
